<template>
  <div class="view-wrapper">
    <!-- app-container -->
    <div class="head">
      <div class="head_title">
        <div class="head_icon" @click="clickLeft">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="head_month" @click="clickMonth">{{ year }}年{{ month }}月直播排班表</div>
        <div class="head_icon" @click="clickRight">
          <i class="el-icon-arrow-right"></i>
        </div>
        <el-date-picker class="time-date-picker" popper-class="data-class" v-model="queryParams.month" :editable="false"
          type="month" placeholder="请选择" @change="changeYear">
        </el-date-picker>
      </div>

      <div class="live_streaming_data">
        <div class="l_left">
          <div class="l_left_word">计划直播场次：{{ scheduleStatistics.planCount }}场</div>
          <div class="l_left_word">实际直播场次：{{ scheduleStatistics.factCount }}场</div>
        </div>
        <div class="l_right">
          <export-excel-button :title="year + '年' + month + '月直播排班详情'" action="/live/calendar/export" exportText="导出详情"
            type="2" :params="ExportParams" />
        </div>
      </div>
      <div class="live_title">快速搜索</div>
      <el-form :model="queryParams" ref="queryForm" label-width="auto" label-position="right" class="el_form_class">
        <!-- <el-form-item label="查看日期：" prop="month">
          <el-date-picker
            v-model="queryParams.month"
            format="yyyy-MM"
            value-format="yyyy-MM"
            type="month"
            placeholder="选择月">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item label="选择主播/中控：" prop="userIds">
          <el-select v-model="queryParams.userIds" placeholder="请选择" multiple style="width: 100%;">
            <el-option v-for="item in liveUserList" :key="item.id" :label="item.name + ' ' + item.phone"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="输入直播客户：" prop="customerName">
          <!-- <el-select v-model="queryParams.clientIds" placeholder="请选择" style="width: 100%;" filterable multiple>
            <el-option v-for="item in clientList" :key="item.id" :label="item.customerName" :value="item.id">
            </el-option>
          </el-select> -->
          <el-input v-model="queryParams.customerName" placeholder="请输入客户名称" />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="live_title">门店直播计划</div>
      <div class="live_table">
        <!-- v-loading="loading" -->
        <el-table ref="multipleTable" :data="schedulePlanLive" stripe border tooltip-effect="dark" style="width: 100%">
          <el-table-column label="时间段" prop="timeStr"></el-table-column>
          <el-table-column label="今天" prop="todayList"></el-table-column>
          <el-table-column label="明天" prop="tomorrowList"></el-table-column>
          <el-table-column label="后天" prop="afterTomorrowList"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="listBox">
      <div class="weekHeader">
        <div class="weekitem">周日</div>
        <div class="weekitem">周一</div>
        <div class="weekitem">周二</div>
        <div class="weekitem">周三</div>
        <div class="weekitem">周四</div>
        <div class="weekitem">周五</div>
        <div class="weekitem">周六</div>
      </div>
      <div class="weekCentent">
        <div class="daysList" v-for="(item, index) in tabList" :key="index">
          <div class="tips">
            <div v-if="item.day == '01'" class="num">{{ item.moth }}</div>
            <!-- <div v-if="item.day == '01' && !item.isToDay" class="num" style="color: #e3e7ed;">{{ item.moth }}</div> -->
            <div class="txt" v-else-if="item.isToDay">今</div>
            <div v-else-if="item.day != '01'">
              <div class="num" v-if="item.day < day" style="color: #e3e7ed;">{{ item.day }}</div>
              <div class="num" v-if="item.day > day">{{ item.day }}</div>
            </div>
          </div>

          <div class="liveBox">
            <div v-for="(aitem, aindex) in item.liveList" :key="aindex" @click="editClick(item, aitem)">
              <div v-if="aitem.customerName != ''" class="liveList" :class="navClass[parseInt(aitem.status) - 1]">
                <div class="line"></div>
                <div class="liveList_l">
                  <div class="liveList_top">
                    <div class="time">{{ aitem.beginTimeStr }}-{{ aitem.endTimeStr }}</div>
                    <div class="name">{{ aitem.customerName }}</div>
                  </div>
                  <div class="liveList_bottom">{{ aitem.userList && aitem.userList.length > 0 ? aitem.userList.join('/')
                    : '' }}
                  </div>
                </div>
              </div>
              <div v-else class="liveList" style="background-color: #f2fAf3;">
                <div class="line" style="background-color: #29ca39;"></div>
                <div class="liveList_l" style="margin-top: 4px;">
                  <div class="liveList_top">
                    <div class="time" style="color: #29ca39;">{{ aitem.beginTimeStr }}-{{ aitem.endTimeStr }}</div>
                    <div class="name" style="font-weight: bold; color: #29ca39;">未安排</div>
                  </div>
                  <!-- <div class="liveList_bottom">{{ aitem.userList && aitem.userList.length > 0 ? aitem.userList.join('/') : '' }} -->
                </div>
              </div>
            </div>
          </div>
          <div class="liveList liveList_but">
            <el-button type="primary" size="mini" @click="addClick(item)">新增直播</el-button>
          </div>
        </div>
        <div class="liveBoxBottom">
          <div class="box_item">
            <div class="block"></div>
            <p class="word">已完成</p>
          </div>
          <div class="box_item">
            <div class="block"></div>
            <p class="word">进行中</p>
          </div>
          <div class="box_item">
            <div class="block"></div>
            <p class="word">未安排</p>
          </div>
          <!-- <div class="box_item">
              <div class="block"></div>
              <p class="word">未完成</p>
            </div> -->
        </div>
      </div>
    </div>
    <div class="btnBot">
      <!-- <el-button type="primary" @click="closure">关闭</el-button> -->
    </div>
    <lookDialog v-bind="$attrs" v-if="dialogVisible" :id="id" :pathType="pathType" :visible.sync="dialogVisible"
      @success="_handleSuccess">
    </lookDialog>
    <LiveBroadcastDialog v-if="dialogLive" :itemData="itemData" :id="id" :pathType="pathType" :visible.sync="dialogLive"
      @success="_handleSuccess"> </LiveBroadcastDialog>
  </div>
</template>

<script>
import {
  liveCalendarList,
  clientUserSelectList,
  liveCalendarPlanList,
  liveCalendarCount
} from "@/api/customer/rowDateList";
// import lookDialog from "./components/lookDialog";
import LiveBroadcastDialog from "./components/liveBroadcastDialog";
import { parseTime } from '@/utils/index.js'
import ExportExcelButton from "@/components/ExportExcelButton/index";
import Cookies from 'js-cookie'
export default {
  name: "",
  components: {
    // lookDialog,
    ExportExcelButton,
    LiveBroadcastDialog
  },
  data() {
    return {
      dialogId: "",
      dialogVisible: false,
      dialogLive: false, //直播弹窗控制状态
      id: '',
      itemData: {},//添加/修改日期数据
      // 遮罩层
      loading: false,
      //表格数据
      tabList: [],
      pathType: "add",
      current: "",
      year: '',
      month: '',
      // 查询参数
      queryParams: {
        customerName: '',//客户名称
        userIds: [], //直播相关人员ID集合
        month: '', //查看日期 yyyy-MM
      },
      date: [],
      liveUserList: [],//主播
      schedulePlanLive: [],//获取三天内门店直播计划
      scheduleStatistics: '',//获取排班统计信息
      day: '',
      // navClass:['classOne','classTwo','classThree','classFour']
      navClass: ['classTwo', 'classThree']
    };
  },
  computed: {
    ExportParams() {
      const params = {
        ...this.queryParams,
      };
      return params;
    },
  },
  created() {
    this.getMonthFunc()
    this.getLiveUserList() //主播下拉/中控人员下拉
    this.getLiveSchedulePlanLive()
    // this.getList();
  },
  methods: {
    clickMonth() {
      document.querySelector(".time-date-picker").querySelector("input").focus();
    },
    // 点击左边
    clickLeft() {
      var date = new Date(JSON.parse(JSON.stringify(this.queryParams.month)));  //深拷贝
      var prevMonth = new Date(date.getFullYear(), date.getMonth() - 1, 1);
      this.assignData(prevMonth)
    },
    // 点击右边
    clickRight() {
      var date = new Date(JSON.parse(JSON.stringify(this.queryParams.month)));  //深拷贝
      var nextMonth = new Date(date.getFullYear(), date.getMonth() + 1, 1);
      this.assignData(nextMonth)
    },
    // 获取本月
    getMonthFunc() {
      let month = new Date()
      this.assignData(month)
    },
    // 获取年月分
    assignData(date) {
      this.queryParams.month = parseTime(date, '{y}-{m}')
      this.year = date.getFullYear()
      this.month = date.getMonth() + 1
      this.getList();
      this.getLiveCalendarCount();
    },
    changeYear(checkYear) {
      if (checkYear !== null) {
        var month = new Date(checkYear)
        this.assignData(month)
      }
    },
    //主播下拉/中控人员下拉
    getLiveUserList() {
      clientUserSelectList().then((res) => {
        this.liveUserList = res.result;
      });
    },
    // 获取三天内门店直播计划 
    getLiveSchedulePlanLive() {
      liveCalendarPlanList().then((response) => {
        this.schedulePlanLive = response.result;
        this.schedulePlanLive = this.schedulePlanLive.map(item => {
          // 今天直播客户
          if (item.todayList.length == 0) {
            item.todayList = '无'
          } else {
            item.todayList = item.todayList.join("、")
          }
          // 明天直播客户
          if (item.tomorrowList.length == 0) {
            item.tomorrowList = '无'
          } else {
            item.tomorrowList = item.tomorrowList.join("、")
          }
          // 后天直播客户
          if (item.afterTomorrowList.length == 0) {
            item.afterTomorrowList = '无'
          } else {
            item.afterTomorrowList = item.afterTomorrowList.join("、")
          }
          return item
        })
      });
    },
    // 获取排班统计信息
    getLiveCalendarCount() {
      var data = {
        month: this.queryParams.month
      }
      liveCalendarCount(data).then((response) => {
        this.scheduleStatistics = response.result;
      });
    },
    /** 查询列表 */
    getList() {
      // this.loading = true;
      liveCalendarList(this.queryParams).then((response) => {
        this.tabList = response.result;
        this.day = ''
        this.tabList.map(item => {
          if (item.isToDay)
            this.day = item.day
        })
      });
    },
    // 表单重置
    reset() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 新增直播
    addClick(item) {
      this.dialogLive = true
      this.itemData = item
      this.pathType = 'add'
    },
    // 编辑直播
    editClick(item, row) {
      this.id = row.id
      this.itemData = item
      this.dialogLive = true
      this.pathType = 'edit'
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");

      this.reset();
    },
    // 关闭
    closure() {
      this.$router.back()
    },
    _handleSuccess(e) {
      //成功回调
      this.getList();
      this.getLiveCalendarCount()
      this.getLiveSchedulePlanLive()
    },
  },
};
</script>

<style lang="scss">
.data-class {
  .el-month-table td.current:not(.disabled) .cell {
    color: #1890ff;
  }

  .el-month-table td.today .cell {
    color: #606266;
    font-weight: normal;
  }
}
</style>

<style lang="scss" scoped>
.view-wrapper {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;

  .live_title {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: bold;
  }

  .live_table {
    padding-bottom: 20px;
    box-sizing: border-box;
  }

  .el_form_class {
    margin-bottom: 20px;
  }

  .live_streaming_data {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 40px;

    .l_left {
      .l_left_word {
        &:first-child {
          margin-bottom: 10px;
        }
      }
    }

  }
}

.head {
  width: 420px;
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 25px 20px 0;

  .head_title {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    position: relative;

    .time-date-picker {
      position: absolute;
      z-index: -100;
      // transform: scale(0.2) translate(-300px, 100px);
    }

    .head_month {
      // padding:0 20px;
    }

    .el-icon-arrow-left,
    .el-icon-arrow-right {
      padding: 0 20px;
      font-size: 20px;
      font-weight: bold;
    }
  }
}

.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  // padding: 20px 20px;
  margin-left: 20px;
  box-sizing: border-box;
  // margin-top: 10px;
  flex: 1;
  width: 0;

  .weekHeader {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 48px;
    border-bottom: 1px solid #eee;
  }

  .weekitem {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-weight: bold;
    font-size: 14px;

  }

  .weekCentent {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .daysList {
      width: calc(100% / 7);
      height: 150px;
      border-right: 1px solid #eee;
      border-bottom: 1px solid #eee;
      background-color: #fdffff;

      .tips {
        width: 100%;
        height: 25px;
        padding: 0 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .txt {
          font-size: 15px;
          font-weight: bold;
          color: #46a6ff;
        }

        .num {
          font-size: 15px;
          font-weight: bold;
          color: #222;
        }
      }

      .liveBox {
        padding: 0 5px;
        height: calc(150px - 62px);
        overflow-y: auto;
        margin-bottom: 5px;

        &::-webkit-scrollbar {
          width: 5px;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 5px;
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: rgb(116, 115, 115);
        }

        &::-webkit-scrollbar-track {
          width: 5px;
        }

        .liveList {
          // height: 100%;
          display: flex;
          // align-items: stretch;
          font-size: 12px;
          margin-top: 10px;
          padding-right: 5px;
          box-sizing: border-box;
          cursor: pointer;

          .line {
            width: 3px;
            min-height: 29px;
            background-color: #333;
            border-radius: 2px;
          }

          .liveList_l {
            display: flex;
            justify-content: center;
            flex-direction: column;
            padding: 3px;
            flex: 1;
            width: 0;
            .liveList_top {
              width: 100%;
              display: flex;
              flex-direction: row;
              align-items: center;

              .time {
                width: 70px;
                margin-right: 5px;
              }

              .name {
                flex: 1;
                width: 0;
                overflow: hidden;
                /* 确保超出容器的文本被裁剪 */
                white-space: nowrap;
                /* 确保文本在一行内显示 */
                text-overflow: ellipsis;
                /* 使用省略号表示文本超出 */
                text-align: end;
              }
            }

            .liveList_bottom {
              margin-top: 4px;

            }

          }


        }

        .liveList:hover {
          color: #46a6ff;
        }

        .classOne,
        .classFour {
          background-color: transparent;
          box-shadow: 0px 0px 3px 0px #00000033;

          // background-color: #fff5f3;
          .line {
            // background-color: #ff7446;
            background-color: #222222;
          }

          .liveList_l {
            .time {
              color: #222222;
            }

            .name {
              color: #222222;
            }
          }


        }

        .classTwo {
          background-color: #f5fbff;

          .line {
            background-color: #46a6ff;
          }

          .liveList_l {
            .time {
              color: #46a6ff;
            }

            .name {
              color: #46a6ff;
            }
          }


        }

        .classThree {
          background-color: #f7f7f7;

          .line {
            background-color: #bebebe;
          }

          .liveList_l {
            .time {
              color: #bebebe;
            }

            .name {
              color: #bebebe;
            }
          }


        }

        // .classFour{
        //    background-color: #f7f7f7;
        //   .liveList_l{
        //     .line{
        //       background-color: #f90707;
        //     }
        //     .time {
        //       color: #f90707;
        //     }
        //   }
        //   .name {
        //      color: #f90707;
        //   }  
        // }

      }

      .liveList_but {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    }

    .detaList:nth-child(7n) {
      border-right: none;
    }
  }
}

.liveBoxBottom {
  width: 100%;
  padding: 30px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;

  .box_item {
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: 12px;
    color: #222;
    margin-right: 50px;

    .block {
      width: 11px;
      height: 11px;
      border-radius: 2px;
      margin-right: 10px;
    }

    &:nth-child(1) {
      .block {
        border: 2px solid #BEBEBE;
        background: #BEBEBE;
      }
    }

    &:nth-child(2) {
      .block {
        border: 2px solid #46A6FF;
        background: #46A6FF;
      }
    }

    &:nth-child(3) {
      .block {
        border: 2px solid #29CA39;
        background: #29CA39;
      }
    }

    &:nth-child(4) {
      margin-right: 0;

      .block {
        background: #FFFFFF;
        box-shadow: 0px 0px 2px 0px #00000033;
      }
    }
  }
}

.listBox_head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;

  .right {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}

.btnBot {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
</style>